<template>
  <div class="popover">
    <span>颜文字</span>
    <el-popover
      placement="top"
      title="颜文字"
      width="200"
      trigger="click"
      content="样式设置参考element的tabs"
    >
      <el-button class="pop" size="small" slot="reference">激活</el-button>
    </el-popover>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Iemoticon from "@/interface/emoticon/Iemoticon";
import getEmoticon from "@/utils/emoticon";

@Component({
  components: {},
})
export default class ContentPop extends Vue {
  emoji: Array<Iemoticon> = [];

  async created(): Promise<void> {
    const data = await getEmoticon();
    console.log(data);
  }

  select(emoji: string): void {
    console.log(emoji);
  }
}
</script>

<style lang="scss" scoped>
.popover {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  position: relative;
  background-color: darkmagenta;

  .pop {
    //设置垂直居中
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  span {
    padding-left: 10px;
  }
}
</style>
